<template>
  <div class="about">
    <img
      :src="item.url"
      alt="暂无图片"
      v-for="(item, index) in lists"
      :key="item.id"
      class="imgs"
      v-show="index == indexs"
    />
    <div>
      <ul>
        <li @click="lis(0)">1</li>
        <li @click="lis(1)">2</li>
        <li @click="lis(2)">3</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexs: 0, //默认显示第一个
      lists: [
        {
          url: "/image/1.png",
          id: 1,
        },
        {
          url: "/image/2.png",
          id: 2,
        },
        {
          url: "/image/3.png",
          id: 3,
        },
      ],
    };
  },
  methods: {
    timer() {
     setInterval(() => {
        this.indexs++
        if (this.indexs == 3) {
          this.indexs = 0;
        }

      }, 1000);
    },
    lis(val) {
      this.indexs = val;
    },
  },
  created() {
    this.timer()
  },
  mounted() {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.imgs {
  width: 500px;
}
.about {
  width: 650px;
  margin: auto;
  position: relative;
}
ul {
  width: 150px;
  // background: pink;
  display: flex;
  justify-content: space-between;
  align-content: center;
  list-style: none;
  position: absolute;
  left: 178px;
  top: 132px;
  li {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: #fff;
    border-radius: 50%;
    margin: 5px;
    border: 1px solid red;
  }
}
</style>
